<template>
    <div class="login-vue" :style="bg">
        <b-container class="bv-example-row row-box">
            <b-row align-h="center">
                <b-col cols="12" sm="12" md="5" lg="5" class="login-contain">
                    <div class="logo-info">
                        <router-link to="/"><img :src="logo" alt=""></router-link>
                    </div>
                    <div class="login-item">
                        <div class="form-title">
                            <p>找回密码</p>
                        </div>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                            <FormItem prop="identifier">
                                <Input v-model="formValidate.identifier" placeholder="请输入注册邮箱" />
                            </FormItem>
                            <FormItem prop="credential">
                                <Input type="password" v-model="formValidate.credential" placeholder="请输入新密码" />
                            </FormItem>
                            <FormItem prop="newCredential">
                                <Input type="password" v-model="formValidate.newCredential" placeholder="请再次确认密码" />
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="updateCredential('formValidate')" long>重置密码</Button>
                            </FormItem>
                        </Form>
                        <div class="extra">
                            <p>
                                <router-link to="/login">去登录</router-link>
                            </p>
                        </div>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
  name: 'forgetPwd',
  data () {
    const validateIdentifier = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('账号不能为空哦'))
      }
      // 模拟异步验证效果（判断邮箱是否存在）
      setTimeout(() => {
        this.$axios({
          url: 'userLoginAuths/findByIdentifier',
          method: 'get',
          params: {
            identifier: this.formValidate.identifier
          }
        }).then(res => {
          if (res.data.code === 200) {
            // 邮箱存在保存用户信息
            this.userLogin = res.data.object
            callback()
          } else if (res.data.code === 400) {
            callback(new Error(res.data.msg))
          }
        })
      }, 1000)
    }
    const validateCredential = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.formValidate.newCredential !== '') {
          // 对第二个密码框单独验证
          this.$refs.formValidate.validateField('newCredential')
        }
        callback()
      }
    }
    const validateNewCredential = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formValidate.credential) {
        callback(new Error('两次密码不匹配'))
      } else {
        callback()
      }
    }

    return {
      logo: require('../assets/imgs/logo2.png'),
      bg: {},
      userLogin: '',
      // 识别标识密码验证
      formValidate: {
        identifier: '',
        credential: '',
        newCredential: ''
      },
      ruleValidate: {
        identifier: [
          { validator: validateIdentifier, trigger: 'blur' }
        ],
        credential: [
          { validator: validateCredential, trigger: 'blur' }
        ],
        newCredential: [
          { validator: validateNewCredential, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
  },
  methods: {
    // 修改密码凭证
    updateCredential (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'userLoginAuths/updateCredential',
            method: 'get',
            params: {
              ulaUid: this.userLogin.ulaUid,
              ulaCredential: this.userLogin.ulaCredential
            }
          }).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              // 发送邮件提示用户修改密码成功
              this.$axios({
                url: 'userLoginAuths/updateEmail',
                method: 'get',
                params: {
                  email: this.userLogin.ulaIdentifier
                }
              }).then(result => {
              })
              // 并跳回登录页面
              this.$router.push('/login')
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.login-item{
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 30px;
}
.logo-info a{
    display:block;
    text-align: center;
}
.logo-info a img{
    width: 280px;
    height: 80px;
    margin-bottom: 20px;
}
.extra{
    text-align: center;
}
.login-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.form-title {
    text-align: center;
    font-size: 20px;
    color:#333;
}
</style>
